<template>
  <div class="goodsinfo-container">
    <!-- 小球 -->
    <transition 
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter"
    >                                    
    <!-- ref可以获取组件内部的元素 -->
      <div class="ball" v-show="ballflag" ref="ball"></div>
    </transition>
    
      <!-- 这是商品轮播图区域 -->
    <div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
						<swiper :lunbotuList="this.lunbotu" :isfull="false"></swiper>
				</div>
			</div>
		</div>
      <!-- 这是商品购买区域 -->
    <div class="mui-card">
				<div class="mui-card-header">{{goodsinfo.title}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
              市场价：<del>￥{{goodsinfo.market_price}}</del>&nbsp;&nbsp;
              销售价：<span class="now_price">￥{{goodsinfo.sell_price}}</span>
            </p>
            <p>购买数量：<numbox @getcount="getSelectedCount" :max="goodsinfo_stock_quantity"></numbox></p>
            <p>
              <mt-button type="primary" size="small">立即购买</mt-button>
              <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
            </p>
					</div>
				</div>
			</div>
      <!-- 这是商品信息区域 -->
    <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：{{goodsinfo.goods_no}}</p>
            <p>库存情况：{{goodsinfo.stock_quantity}}件</p>
            <p>上架时间：{{goodsinfo.add_time | dateFormat}}</p>
					</div>
				</div>
				<div class="mui-card-footer">
             <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
            <mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
          
        </div>
			</div>
  </div>
</template>

<script>
  import swiper from '../subcomponents/swiper.vue'
  import numbox from '../subcomponents/goodsinfo_numbox.vue'
  export default {
    data(){
      return {
        id: this.$route.params.id, //将路由参数中的id挂载到data,方便调用
        lunbotu: [],//轮播图数据
        goodsinfo: {},//获取到商品信息
        ballflag: false,
        selectedCount: 1 //保存用户选中的商品数量，默认用户买一个
      }
    },
    methods: {
      getLunbotu(){
        this.$http.get('api/getthumimages/'+ this.id).then(result=>{
          if(result.body.status === 0){
            //先循环轮播图数据的每一项,为item添加img属性，因为轮播图组件中只认识item.img不认识item.src
            result.body.message.forEach(item=>{
              item.img = item.src
            })
            this.lunbotu = result.body.message
          }
        })
      },
      getGoodsInfo(){
        this.$http.get('api/goods/getinfo/' + this.id).then(result=>{
          if(result.body.status === 0){
            this.goodsinfo = result.body.message[0]
          }
        })
      },
      goDesc(id){
        //点击使用编程式导航跳转到图文介绍页面
        this.$router.push({name: 'goodsdesc',params: {id}})
      },
      goComment(id){
        this.$router.push({name: 'goodscomment',params: {id}})
      },
      addToShopCar(){
        //添加购物车
        this.ballflag = !this.ballflag;
        //拼接出一个要保存到store中car数组的商品信息对象
        var goodsinfo = {
          id: this.id,
          count: this.selectedCount,
          price:this.goodsinfo.sell_price,
          selected: true
          };
          //调用store中mutations来将商品加入购物车
        this.$store.commit('addToCar',goodsinfo);
        // console.log(goodsinfo);
      },
      beforeEnter(el){
        el.style.transform="translate(0,0)"
      },
      enter(el,done){
        el.offsetWidth;
        //小球动画优化思路
        //1、导致动画不准确的本质原因，我们把小球位移位置已经写死了
        //2、只要分辨率和测试的不一样，或者滚动条有一定距离，问题就出现了
        //3、因此位移的距离不能写死
        //4、先得到徽标的坐标，再得到小球的坐标，求差，得到的结果就是位移的距离
        //5、如何得到小球和徽标的位置??? domObject.getBoundingClientRect()

        //获取小球再页面中的位置
        const ballPosition = this.$refs.ball.getBoundingClientRect();
        //操作dom获取徽标再页面的位置
        const badgePosition = document
        .getElementById("badge")
        .getBoundingClientRect();

        const xDist = badgePosition.left - ballPosition.left;
        const yDist = badgePosition.top - ballPosition.top;
        // el.style.transform="translate(${xDist}px,${yDist}px)";
        el.style.transform="translate("+xDist+"px,"+yDist+"px)";
        el.style.transition="all 0.5s cubic-bezier(.4,-0.3,1,.68)";
        done()
      },
      afterEnter(el){
        this.ballflag = !this.ballflag
      },
      getSelectedCount(count){
        //当子组件把选中的数量传递给父组件的时候，把选中的值保存到data上
        this.selectedCount = count;
        // console.log("父组件"+this.selectedCount)
      }
    },
    created(){
      this.getLunbotu(),
      this.getGoodsInfo()
    },

    components: {
      swiper,
      numbox
    }
  }
</script>

<style scoped>
.goodsinfo-container {
  background-color: #eee;
  overflow:hidden;
}
.now_price{
  color: red;
  font-size: 16px;
  font-weight: bold;
}
.mui-card-footer {
  display: block
}
.mui-card-footer button{
  margin-bottom: 15px;
}
.ball{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color:red;
  position: absolute;
  z-index: 999;
  top: 410px;
  left: 146px;
}
</style>

